﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
     .userlogin_body {
         	 padding-right: 0px; PADDING-LEFT: 0px; BACKGROUND: url(image/userlogin/user_all_bg.gif) #226cc5 repeat-x 50% top; PADDING-BOTTOM: 0px; MARGIN: 110px 0px 0px; FONT: 12px/150% Arial, "宋体" ,Helvetica,sans-serif; PADDING-TOP: 0px; TEXT-DECORATION: none
        }
     .user_main_text {
            LINE-HEIGHT: 34px; HEIGHT: 34px
        }
     .user_main_input {
	        LINE-HEIGHT: 34px; HEIGHT: 34px
        }
     .user_main_text {
	        WIDTH: 73px; 
            color : #000
        }
     .TxtUserNameCssClass {
	        BORDER-TOP-WIDTH: 0px; PADDING-LEFT: 25px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(image/userlogin/user_login_name.gif) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 140px; LINE-HEIGHT: 20px; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px
        }
     .TxtPasswordCssClass {
	        BORDER-TOP-WIDTH: 0px; PADDING-LEFT: 25px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(image/userlogin/user_login_password.gif) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 140px; LINE-HEIGHT: 20px; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px
        }
      .TxtCheckCssClass {
	        border-width: 0px;
            PADDING-LEFT: 25px;     BACKGROUND: url(image/userlogin/user_login_validatecode.gif) no-repeat; WIDTH: 90px; 
            LINE-HEIGHT: 20px;     HEIGHT: 21px;
        }
     .code {  
           background-image:url(code.jpg);  
           font-family:Arial;  
           font-style:italic;  
           color:Red;  
           border:0;  
           letter-spacing:3px;  
           font-weight:bolder;  
       }  
     .unchanged  {  
           border:0;  
       }   
    </style>
    <script language="javascript" type="text/javascript">  
        var code ; //在全局 定义验证码  
        function createCode()  
        {   
          code = "";  
          var codeLength = 4;//验证码的长度  
          var checkCode = document.getElementById("checkCode");  
          var selectChar = new  Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');// 所有候选组成验证码的字符，当然也可以用中文的  
              
          for(var i=0;i<codeLength;i++){                        
             var charIndex = Math.floor(Math.random()*36);  
             code +=selectChar[charIndex];           
          }  
          if(checkCode)  
          {  
            checkCode.className="code";  
            checkCode.value = code;  
          }           
        }  
        function checkVerifyCode()  
        {  
          var inputCode = document.getElementById("verifyCodeID").value ;  
       
          if(inputCode.toLowerCase() != code.toLowerCase() )  
          {  
    		 alert("错误的验证码！"); 
    		 document.getElementById('verifyCodeID').value='';
             createCode();//刷新验证码  
          }           else{ }
        }  
       </script>  
</head>
<body class="userlogin_body" onload="createCode()">
    <form id="form1" runat="server">
    <div style="text-align:center">
        <div style="border:0; width:589px; margin:0 auto">
 
           <div style="float:left; border:0; height:116px">
             <img src="image/userlogin/user_top_l.gif" alt="" />
           </div>
           <div style="border:0; height:116px">
             <div style=" float:left; border:0; height:116px">
               <img src="image/userlogin/user_top_c.gif" alt=""/>
             </div>
             <div style=" border:0; height:116px">
               <img src="image/userlogin/user_top_r.gif" alt=""/>
             </div>
           </div> 
           
           <div style="float:left; border:0 ; height:139px">
             <img src="image/userlogin/user_main_l.gif" alt=""/>
           </div>
           <div style="border:0; height:139px">
             <div style="float:left; border:0; height:139px; width:280px; background-image:url(image/userlogin/user_main_c.gif)">
               <table style="margin-left:0; border:0; width:280px">
                 <tr>
                   <td>
                                          用户名
                   </td>
                   <td>
                     <asp:TextBox ID="username" CssClass="TxtUserNameCssClass" runat="server"></asp:TextBox>
                   </td>
                   <td style="width:54px">
                      <asp:RequiredFieldValidator ID="rfcUsername"  ErrorMessage="不能为空" runat="server" ControlToValidate="username" Display="Dynamic"></asp:RequiredFieldValidator>
                   </td>
                 </tr>
                 <tr>
                   <td>
                   密&nbsp;&nbsp; 码
                   </td>
                   <td>
                     <asp:TextBox ID="password" TextMode="Password" CssClass="TxtPasswordCssClass" runat="server"></asp:TextBox>                  
                   </td>
                   <td  style="width:54px">
                      <asp:RequiredFieldValidator ID="rfcPassword" ErrorMessage="不能为空"  runat="server" ControlToValidate="password" Display="Dynamic"></asp:RequiredFieldValidator>
                   </td>
                 </tr>
                 <tr>
                   <td>验证码
                   </td>
                   <td colspan="2">
                     <asp:TextBox CssClass="TxtCheckCssClass" id="verifyCodeID" runat="server" onblur="checkVerifyCode();"></asp:TextBox>
   				     <input style="border-style: none; border-color: inherit; border-width: 0; cursor:pointer; width:55px; " 
                           type="text" onclick="createCode()" readonly="readonly" id="checkCode" 
                           class="unchanged" size="4"/>&nbsp;<a style="cursor:pointer" onclick="createCode();">看不清？</a>
                   </td>
                 </tr>
                 <tr>
                   <td colspan="3" style="margin-left:50px;height:22px">
                      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ErrorMessage="验证码不能为空"  runat="server" ControlToValidate="verifyCodeID" Display="Dynamic"></asp:RequiredFieldValidator>
                   </td>
                 </tr>
                 <tr>
                   <td colspan="2">
                     <asp:Button ID="Button1" Text="登陆" Width="60px" runat="server" onclick="Button1_Click" />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <input type="reset" style="width:60px"   />
                     </td>
                 </tr>
               </table>
             </div>
             <div style="border:0; height:139px;">
               <img src="image/userlogin/user_main_r.gif" alt="" />
             </div>
           </div>
           
           <div style="float:left; border:0; height:117px">
             <img src="image/userlogin/user_bottom_l.gif" alt=""/>
           </div>   
           <div style="border:0; height:117px">
              <div style="float:left; border:0; height:117px">
                <img src="image/userlogin/user_bottom_c.gif" alt=""/>
              </div>
              <div style="border:0; height:117px" >
                <img src="image/userlogin/user_bottom_r.gif" alt=""/>
              </div>
           </div>
        </div>
    </div>
    </form>
</body>
</html>
